<template>
  <a-modal
    title="导入值班表"
    :width="600"
    :visible="visible"
    :confirmLoading="confirmLoading"
    okText="确定"
    cancelText="取消"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <!-- `Field ${i}` -->
    <a-spin :spinning="formLoading">
      <div id="components-form-demo-advanced-search">
        <a-form
          class="ant-advanced-search-form"
          :form="form"
          @submit="handleSubmit"
          :labelCol="{ span: 5, offset: 0 }"
        >
          <a-row>
            <a-col :span="24">
              <a-form-item label="所属年份">
                <a-date-picker
                  placeholder="请选择所属年份"
                  mode="year"
                  :open="dataopen"
                  format="YYYY"
                  :allowClear="false"
                  @openChange="openChangeYear"
                  @panelChange="panelChangeYear"
                  style="width: 200px"
                  v-decorator="[
                    'dutyYear',
                    {
                      rules: [{ required: true, message: '请选择所属年份！' }],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-item label="值班类型">
                <a-select
                  style="width: 200px"
                  placeholder="请选择值班类型"
                  v-decorator="[
                    'dutyType',
                    {
                      rules: [{ required: true, message: '请选择值班类型！' }],
                    },
                  ]"
                >
                  <a-select-option
                    v-for="(item, index) in dutyList"
                    :key="index"
                    :value="item.code"
                  >
                    {{ item.value }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-item label="上传文件">
                <a-upload-dragger
                  name="file"
                  :multiple="false"
                  :file-list="fileList"
                  :remove="handleRemove"
                  :before-upload="beforeUpload"
                  v-decorator="[
                    'file',
                    { rules: [{ required: true, message: '请选择文件！' }] },
                  ]"
                >
                  <p class="ant-upload-drag-icon"><a-icon type="inbox" /></p>
                  <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
                  <p class="ant-upload-hint"></p>
                </a-upload-dragger>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
import { uploadRecord } from "@/api/system/duty";
import { queryOneDist } from "@/api/system/dist";

export default {
  data() {
    return {
      moment,
      dataopen: false, // 默认是否打开弹框
      visible: false,
      confirmLoading: false,
      dutyList: [],
      form: this.$form.createForm(this),
      formLoading: true,
      fileList: [],
    };
  },
  methods: {
    // 点击选择框事件 弹出日期组件选择年
    openChangeYear(status) {
      if (status) {
        this.dataopen = true;
      } else {
        this.dataopen = false;
      }
    },
    // 选择年之后 关闭弹框
    panelChangeYear(value) {
      this.form.setFieldsValue({ dutyYear: value });
      this.dataopen = false;
    },
    // 上传
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file) {
      this.fileList = [file];
      return false;
    },
    handleSubmit() {
      const {
        form: { validateFields },
      } = this;
      if (!this.fileList.length) {
        this.$message.warning('请选择文件！');
        return;
      }
      this.confirmLoading = true;
      validateFields((errors, values) => {
        if (!errors) {
          console.log("提交参数", values);
          let formData = new FormData();
          this.fileList.forEach((file) => {
            formData.append("file", file);
          });
          formData.append("dutyYear", moment(values.dutyYear).get("year"));
          formData.append("dutyType", values.dutyType);
          uploadRecord(formData)
            .then((res) => {
              if (res.data.success) {
                this.$message.success("上传成功");
                this.$emit("ok", values);
                this.handleCancel();
              } else {
                this.$message.error("上传失败" + res.message);
              }
            })
            .finally((res) => {
              this.confirmLoading = false;
            });
        } else {
          this.confirmLoading = false;
        }
      });
    },
    handleCancel() {
      this.form.resetFields();
      this.fileList = [];
      this.visible = false;
      this.confirmLoading = false;
    },
    // 获取字典数据
    async sysDictTypeDropDown(type) {
      await queryOneDist({ type }).then((res) => {
        this.dutyList = res.data.data[0].values.map((t) => {
          return {
            code: t.base,
            value: t.show,
          };
        });
      });
    },
    // 初始化方法
    add(record) {
      this.visible = true;
      this.formLoading = false;
      //this.form.setFieldsValue({ dutyYear: moment('YYYY', 2021) });
    },
  },
  created() {
    this.sysDictTypeDropDown("duty_type");
  },
};
</script>

<style lang="scss" scoped>
.ant-advanced-search-form {
  padding: 24px;
  background: #fbfbfb;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
}

.ant-advanced-search-form .ant-form-item {
  display: flex;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#components-form-demo-advanced-search .ant-form {
  max-width: none;
}
#components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}
.ant-upload-text {
  padding: 0 30px;
}
</style>
